<template>
	<view>
		<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change"></tui-tabs>
		<tui-loading v-if="loading"></tui-loading>
		<view v-else>
			<block v-for="(item, index) in orderData" :key="index">
				<tui-card :imageUrl="item.createUserAvatar"
						  :image="imgStyle"
				 :titleText ="item.reqType" :tagText ="item.createDate"
				 @click="detail(item)">
					<template v-slot:body>
						<view class="tui-body">
							<view class="detail-label">
								<span>发布人</span>
								<span>{{item.createUserName}}</span>
							</view>
							<view class="detail-label">
								<span>联系电话</span>
								<span>{{item.phone}}</span>
							</view>
							<view class="detail-label">
								<span>预约时间</span>
								<span>{{item.orderStartTime}}</span>
							</view>
						</view>
					</template>
					<template v-slot:footer v-if="currentTab == 2 && (userId == item.createUser || userId == item.pickUser)">
					 	<view class="footer-btn">
					 		<tui-button size="30" width="100rpx" height="60rpx" type="warning" v-if="userId == item.pickUser">退回</tui-button>
							<tui-button size="30" width="140rpx" height="60rpx" type="green" v-if="userId == item.createUser">确认完成</tui-button>
					 	</view>
					 </template>
				 </tui-card>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data(){
		return {
			tabs: [
				{name: '全部'},
				{name: '发布'},
				{name: '已接单'},
				{name: '已完成'},
				{name: '已作废'}
			],
			currentTab: 2,
			searchForm: {
				orderStatus: '全部',
				pageNumber: 1, // 当前页数
			    pageSize: 6, // 页面大小
			},
			pages: 0,
			orderData: [],
			imgStyle: {
			  height: 60, //图片高度
			  width: 60, //图片宽度
			  circle: true //是否圆角
			},
			tagStyle: {
				size: 24, //字体大小
				color: "#00dea7", //字体颜色
				padding: "15rpx",
				bgcolor: "#eafffa",
				borderRadius: "10rpx"
			},
			loading: true,
			userId: uni.getStorageSync("user_info").id
		}
	},
	async onLoad() {
		
		let _this = this;
		_this.searchForm.orderStatus = this.tabs[this.currentTab].name;
		this.getData().then(res => {
			_this.orderData = res.records;
			_this.pages = res.pages;
			_this.loading = false;
		});
	},
	onShow(){
		this.checkReLogin();
	},
	onPullDownRefresh() {
		let _this = this;
		_this.loading = true;
		_this.searchForm.pageNumber = 1;
		_this.getData(_this.searchForm).then(res => {
			_this.orderData = res.records;
			_this.pages = res.pages;
			uni.stopPullDownRefresh();
			_this.loading = false;
		})
	},
	onReachBottom() {
		let _this = this;
		_this.searchForm.pageNumber++;
		if (_this.searchForm.pageNumber> _this.pages) {
			uni.hideNavigationBarLoading();
			// uni.showToast({
			// 	title: '暂无更多数据',
			// 	icon: 'none'	
			// })
		} else {
			_this.getData().then(res => {
				_this.orderData = _this.orderData.concat(res.records);
				uni.hideNavigationBarLoading();
			});
		}
	},
	methods: {
		change(e){
			let _this = this;
			_this.loading = true;
			_this.currentTab = e.index;
			_this.searchForm.orderStatus = this.tabs[e.index].name;
			_this.searchForm.pageNumber = 1;
			_this.getData().then(res => {
				_this.orderData = res.records;
				_this.pages = res.pages;
				_this.loading = false;
			});
		},
		getData(){
			let _this = this;
			return new Promise((resovle,reject) => {
				_this.$api.myOrderList(this.searchForm).then(res => {
					resovle(res.result)
				}).catch(err => {
					reject(err);
				})
			})
		},
		detail(data){
			uni.navigateTo({
				url: '/pages/community/orders/order-detail/order-detail?data='+ encodeURIComponent(JSON.stringify(data))
			})
		},
		checkReLogin(){
			let flag = false;
			let userInfo = uni.getStorageSync("user_info");
			if(userInfo == null || userInfo == '' || userInfo.mobile == '' || userInfo.mobile == null){
				uni.switchTab({
					url: '/pages/my/index?tag=relogin'
				})
				flag = true;
				return flag;
			}
			
		},
	}
};
</script>

<style lang="scss">
	@import url("order.css");
</style>
